<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 	<jsp:include page="header.jsp"/>

<div class="row">
	<div class="span2">
Profile :
<br>
<img alt="Profile pic" src="http://i.pgcdn.com/images/profile/user_profile_silhouette.gif">
<br>
	${profile.name}
</div>
	

<div class="span8">
<div class="container">  

<c:if test="${not empty cap }">
	
	
	<ul class="thumbnails">
		<c:forEach var="capability" items="${cap}">
			
			<li class="span1">
				<div class="thumbnail">
					<img data-src="resources/static/js/holder.js/200x100" alt=""/>
					<h3>${capability.parentCategory}</h3>
					<p>${capability.description} <br/>
						Rating:<span class="badge badge-warning">${capability.rating} </span><br/>
						<c:forTokens items="${capability.keyWordList}" delims="," var="name">
							<span class="label label-success"><c:out value="${name}"/></span>
						</c:forTokens>
					</p>
				</div>
			</li>
				
		</c:forEach>
	</ul>
					

	   
</c:if> 	
					
	<a href="guideTab" class="btn btn-primary btn-mini">Edit Profile</a>	
</div> 
<div id="course-div1" >
	
</div>
</div>
</div>


	<jsp:include page="footer.jsp" />
	<script type="text/javascript">
var html = '';
$(document).ready(function () {
	getCourses();
});

function getCourses(categoryId){
	var url = 'courses.json?categoryId='+categoryId;
	
	jQuery.ajax({
		url: url,
		type: 'GET',
		success: function (data){
			var html = '';
			data = eval(data);
			if(data != null && data != 'undefined'){
				data = eval(data);
				for(var i =0 ; i < data.length ;i++){
					if(i%3==0){
						if(i != 0){
							html = html + '</div><div class="row">';
						}else{
							html = html + '<div class="row">';
						}
					}
					html = html + '<div class="span2"><h2>'+data[i].name+'</h2><p>'+data[i].description+'.</p><p><a class="btn" href="course/'+data[i].id+'">ViewDetails &raquo;</a></p></div>';
				}
				html = html + '</div>';
			}
			console.log(html);
			document.getElementById('course-div1').innerHTML = html;
			//${'#course-div'}.html(html);
		}
	});		

}
</script>
	
</html> 

